/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div class="adaptive-layout">
    <NavigationContainerVue
      :mode="mode"
      :navigationPageName="navigationPageName"
      :navBarWidth="navBarWidth"
      :navBarWidthRange="navBarWidthRange"
      :minContentWidth="minContentWidth"
      :navBarPosition="navBarPosition"
      :onNavigationModeChange="onNavigationModeChange"
    >
      <NavigationBarVue>
        <TabBarContainerVue>
          <TabBarContentVue>
            <div class="list-container">
              <div class="container" :style="{ paddingTop: `${topAvoidArea}px`, height: `calc(100% - ${topAvoidArea}px)` }">
                <!-- 头部标题区域 -->
                <div class="title-wrap">
                  <div class="title-info">
                    <div class="go-back" @click="goHome">
                      <img
                        class="title-img"
                        src="../../assets/images/left.png"
                      />
                    </div>
                    <div class="title-link">
                      <span class="title">消息</span>
                    </div>
                  </div>

                  <div class="icon-wrap">
                    <!-- 小屏搜索图标 -->
                    <template>
                      <img
                        class="title-img"
                        :src="require('../../assets/images/search.png')"
                        alt="搜索"
                      />
                      <img
                        class="title-img"
                        :src="require('../../assets/images/add.png')"
                        alt="添加"
                        :style="{ marginLeft: '8px' }"
                      />
                    </template>
                  </div>
                </div>
                <!-- 消息列表 -->
                <ul class="content message-list">
                  <li
                    v-for="item in messageData"
                    :key="item.id"
                    class="message-item"
                    :class="{ 'item-active': activeItem.id === item.id }"
                    @click="handleMessageClick(item)"
                  >
                    <div class="item">
                      <!-- 头像区域 -->
                      <div class="item-img-wrap">
                        <img
                          class="item-img"
                          :src="item.avatar"
                          :alt="item.name"
                        />
                        <!-- 未读标记 -->
                        <div
                          v-if="item.unread"
                          class="unread-bubble-wrap"
                          :class="{
                            numerical: typeof item.unread === 'number',
                            dot: typeof item.unread !== 'number',
                          }"
                        >
                          <span class="unread-bubble">{{ item.unread }}</span>
                        </div>
                      </div>
                      <!-- 消息内容区域 -->
                      <div class="item-content">
                        <div class="content-main">{{ item.name }}</div>
                        <div class="content-secondary">{{ item.message }}</div>
                      </div>
                      <!-- 时间 -->
                      <div class="item-time">{{ item.time }}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </TabBarContentVue>
          <TabBarVue
            :width="barWidth"
            :height="barHeight"
            bgColor="rgb(241, 243, 245)"
            :selectedColor="selectedColor"
            :unselectedColor="unselectedColor"
            :onTabItemClick="handleClickTable"
            value="0"
          >
            <TabBarItemVue
              v-for="(item, index) in navItems"
              :name="index"
              :key="index"
            >
              <div class="tab-center" :style="{ marginBottom: `${bottomAvoidArea}px` }">
                <img
                  class="toolbar-icon"
                  :src="require(`@/assets/images/${item.icon}.svg`)"
                  :alt="item.title"
                />
                <div
                  :class="[
                    'toolbar-title',
                    index === 0 ? 'toolbar_info' : '',
                    { active: item.active },
                  ]"
                >
                  {{ item.title }}
                </div>
              </div>
            </TabBarItemVue>
          </TabBarVue>
        </TabBarContainerVue>
      </NavigationBarVue>
      <NavigationContentVue></NavigationContentVue>
    </NavigationContainerVue>
  </div>
</template>

<script lang="ts">
import { BreakpointManager } from "@hadss/web_adaptive_layout_ui";
import {
  NavigationContainerVue,
  NavigationContentVue,
  NavigationBarVue,
  TabBarContainerVue,
  TabBarContentVue,
  TabBarVue,
  TabBarItemVue,
} from "@hadss/web_adaptive_layout_vue2";
import { messageData } from "../../mocks/mockData";
import { AvoidArea, AvoidAreaInfo, AvoidAreaType } from "@/common/windowCommon";

export default {
  name: "MessageList",
  components: {
    NavigationContainerVue,
    NavigationContentVue,
    NavigationBarVue,
    TabBarContainerVue,
    TabBarContentVue,
    TabBarVue,
    TabBarItemVue,
  },
  data() {
    return {
      breakpointManager: new BreakpointManager(),
      unsubscribe: null,
      currentBp: "sm",
      messageData: messageData,
      mode: "Auto",
      navBarWidth: 570,
      selectedColor: "rgb(10, 89, 247)",
      unselectedColor: "rgba(0, 0, 0, 0.6)",
      navigationPageName: "MessageList",
      navBarWidthRange: [260, 570],
      minContentWidth: 340,
      navBarPosition: "Start",
      currentMode: 0,
      barHeight: {
        "md": '56px',
        "lg": '100%'
      },
      barWidth: {
        "md": '100%',
        "lg": '96px'
      },
      topAvoidArea: 0,
      bottomAvoidArea: 0,
      activeItem: {
        id: "11",
        name: "张晓萌",
        message: "好的，我明天过来",
        time: "13:55",
        avatar: require("../../assets/images/touxiang.svg"),
        unread: null,
      },
      navItems: [
        { icon: "xiaoxi", title: "消息", active: true },
        { icon: "txl", title: "通讯录", active: true },
        { icon: "sjq", title: "社交圈", active: true },
        { icon: "my", title: "我的", active: true },
      ],
    };
  },
  methods: {
    goHome() {
      if (this.currentMode === 'Split' && this.$route.path === '/messageList/detailContainer') {
        this.$router.go(-2);
      } else {
        this.$router.back();
      }
    },

    handleClickTable(tab) {
      if (tab.index === 0) {
        this.selectedColor = "rgb(10, 89, 247)";
      } else {
        this.selectedColor = "rgba(0, 0, 0, 0.6)";
      }
    },

    handleMessageClick(item: any) {
      this.activeItem = item;
      this.$store.commit("updateItem", item);
      if (this.$route.path === "/messageList") {
        this.$router.push({
          path: "/messageList/detailContainer",
          params: {
            activeItem: JSON.stringify(item),
          },
        });
      }
    },

    onNavigationModeChange(mode: string) {
      this.currentMode = mode;
      if (mode === 'Split' && this.$route.path !== '/messageList/detailContainer') {
        this.$router.push("/messageList/detailContainer");
      }
    },
    
    handleAvoidAreaChange(event: any) {
      const data = event.detail as AvoidAreaInfo;
      const areaType = data.type;
      if (areaType === AvoidAreaType.TYPE_SYSTEM) {
        this.topAvoidArea = (window as any).webClass?.pxToVp(data.area.topRect.height);
      }
      if (areaType === AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        this.bottomAvoidArea = (window as any).webClass?.pxToVp(data.area.bottomRect.height);
        this.barHeight = {
          "md": `${56 + this.bottomAvoidArea}px`,
          "lg": '100%'
        };
      }
    },
  },
  mounted() {
    this.$store.commit('updateItem', this.activeItem);
    this.unsubscribe = this.breakpointManager.subscribeToBreakpoint(
      (bp: string) => {
        this.currentBp = bp;
        this.$store.commit("updateCurrentBp", this.currentBp);
      }
    );
    if ((window as any).webClass) {
      const webClass = (window as any).webClass;
      const topArea = webClass.getAvoidArea(AvoidAreaType.TYPE_SYSTEM) as AvoidArea;
      const bottomArea = webClass.getAvoidArea(AvoidAreaType.TYPE_NAVIGATION_INDICATOR) as AvoidArea;
      this.topAvoidArea = webClass.pxToVp(topArea.topRect.height);
      this.bottomAvoidArea = webClass.pxToVp(bottomArea.bottomRect.height);
      this.barHeight = {
        "md": `${56 + this.bottomAvoidArea}px`,
        "lg": '100%'
      };
    }
    window.addEventListener("avoidAreaChange", this.handleAvoidAreaChange);
  },

  beforeDestroy() {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
    window.removeEventListener("avoidAreaChange", this.handleAvoidAreaChange);
  },
};
</script>

<style lang='less' scoped>
@import "./MessageList.less";
</style>
